$(function() {
	var bannerList = $(".wrapper>img");
	var squareList = $(".squares>span");
	autoTag = 0;

	squareList.each(function(i) {
		$(this).mouseover(function() {
			squareList.removeClass("turn");
			$(this).addClass("turn");
			bannerList.fadeOut(500);
			bannerList.eq(i).fadeIn(500);
			autoTag = i;
		})
	});

	var downtime = setInterval(action, 3000);

	function action() {
		++autoTag;
		if (autoTag > 2) {
			autoTag = 0;
		}
		squareList.eq(autoTag).trigger("mouseover");
	}

	bannerList.each(function() {
		$(this).mouseover(function() {
			clearInterval(downtime);
		});
		$(this).mouseout(function() {
			downtime = setInterval(action, 3000);
		})
	})
})